<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import { fileToBase64 } from '/@/utils/hook/index';
import { exportToExcel } from '/@/utils/exportToExcel';
import changeRiskIdentification from "./ChangeRiskIdentification.vue"
import {
	addRiskIdentifyListApi,
	getRiskIdentificationUploadApi,
	deleteRiskIdentificationApi,
	editRiskIdentificationApi,
	addRiskIdentificationApi,
	getRiskIdentificationListApi,
	getWorkPlaceApi,
} from '/@/api/sms/HazardousChemicalsInterface';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import SearchModel from '/@/views/sms/component/search-model.vue';

/***** 变量 *****/
const showDialogVisible = ref(false);
let searchObj: any = reactive({});
const optionsRisk = [
	{ label: '低风险', value: 0 },
	{ label: '一般风险', value: 1 },
	{ label: '较大风险', value: 2 },
	{ label: '重大风险', value: 3 },
];
let queryRiskForm = reactive({
	hazardRisk: '',
	riskType: '',
});

const ruleForm = reactive({
	l_AnalysisUnitId: null, //作业活动场所
	v_HazardousFactors: '', //危害因素
	v_Event: '', //危害因素
	v_RiskAssessmentL: '', //危害因素
	v_RiskAssessmentE: '', //风险评价L
	v_RiskAssessmentC: '', //风险评价E
	v_RiskAssessmentD: '', //风险评价D
	n_RiskLevel: 0, //风险等级
	v_ControlMeasure: '', //危害因素
	v_IdentificationPersonnel: '', //辨识人员
	d_ReEvaluationDate: '', //重新复评时间
});
/***** searchClick 查询按钮 *****/
const searchClick = () => {
	let newObj = Object.keys(searInfo.value);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = searInfo.value[i];
		});
	}
};

/***** resetClick 重置按钮 *****/
const resetClick = () => {
	searInfo.value = {};
	let newObj = Object.keys(searchObj);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = '';
			// console.log(i);
		});
	}
	initInfoFun();
};

/***** addNodeClick 新增 *****/
const addNodeClick = async () => {
	showDialogVisible.value = true;
};

/***** nodeClick 编辑 *****/
const saveId = ref();
const nodeClick = async (row: any) => {
	console.log(row);
	if (row.id) {
		// ruleForm.accidentName = res.data.accidentName;
		ruleForm.l_AnalysisUnitId = row.l_AnalysisUnitId; //作业活动场所
		ruleForm.v_HazardousFactors = row.v_HazardousFactors; //危害因素
		ruleForm.v_Event = row.v_Event; //危害因素
		ruleForm.v_RiskAssessmentL = row.v_RiskAssessmentL; //危害因素
		ruleForm.v_RiskAssessmentE = row.v_RiskAssessmentE; //风险评价L
		ruleForm.v_RiskAssessmentC = row.v_RiskAssessmentC; //风险评价E
		ruleForm.v_RiskAssessmentD = row.v_RiskAssessmentD; //风险评价D
		ruleForm.n_RiskLevel = row.n_RiskLevel; //风险等级
		ruleForm.v_ControlMeasure = row.v_ControlMeasure; //危害因素
		ruleForm.v_IdentificationPersonnel = row.v_IdentificationPersonnel; //辨识人员
		ruleForm.d_ReEvaluationDate = row.d_ReEvaluationDate; //重新复评时间

		saveId.value = row.id;
	}
	showDialogVisible.value = true;
};

/*** deleteHandle 删除数据事件 */
const deleteHandle = async (val: String | Number, updateFun: Function) => {
	ElMessageBox.confirm('请确定删除此条数据', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let param = { id: val };
			try {
				let res: any = await deleteRiskIdentificationApi(param);
				if (res.success) {
					updateFun();
				}
			} catch (err) {
				return;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败',
			});
		});
};

/*** cancelUseClick  弹窗取消事件 */
const cancelUseClick = () => {
	showDialogVisible.value = false;
	saveId.value = '';
	ruleForm.l_AnalysisUnitId = null; //作业活动场所
	ruleForm.v_HazardousFactors = ''; //危害因素
	ruleForm.v_Event = ''; //危害因素
	ruleForm.v_RiskAssessmentL = ''; //危害因素
	ruleForm.v_RiskAssessmentE = ''; //风险评价L
	ruleForm.v_RiskAssessmentC = ''; //风险评价E
	ruleForm.v_RiskAssessmentD = ''; //风险评价D
	ruleForm.n_RiskLevel = 0; //风险等级
	ruleForm.v_ControlMeasure = ''; //危害因素
	ruleForm.v_IdentificationPersonnel = ''; //辨识人员
	ruleForm.d_ReEvaluationDate = ''; //重新复评时间

	showDialogChangeVisible.value = false;
	sourceId.value = '';
	ruleFormRef.value!.clearValidate();
};

const uploadRef = ref();
const uploadFile1 = async (item: any) => {
	console.log(item);
	let reader = new FileReader();
	reader.readAsDataURL(item.raw);
	reader.onload = (e: any) => {
		let base64String = e.target.result;
		getRiskIdentificationUploadApi({ v_FileStrBase64: base64String }).then(() => {
			uploadRef.value.clearFiles();
		});
	};

	// fileList.push(item);
	// setTimeout(() => {
	// 	let arr: any = [];
	// 	fileList.forEach((element: any) => {
	// 		arr.push(element.raw);
	// 		getRiskIdentificationUploadApi({ file: arr }).then(() => {
	// 			arr = [];
	// 			fileList = [];
	// 		});
	// 	});
	// }, 100);
	//     console.log(params);
	//    await fun1(params)
	// setTimeout(() => {
	//     getRiskIdentificationUploadApi({ file: params.raw })
	// }, 100);
	// fileToBase64(item.file)
	// 	.then(async (base64) => {
	// 		console.log(base64); // 输出文件的Base64编码
	// 	})
	// 	.catch((error) => {
	// 		console.error(error); // 输出错误信息
	// 	});
};

/*** controlUseClick  弹窗提交事件 */
const controlUseClick = async (formEl: FormInstance | undefined, updateFun: Function) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (saveId.value) {
				editRiskIdentificationApi({ ...ruleForm, id: saveId.value }).then((res) => {
					console.log(res);
					cancelUseClick();
					updateFun();
				});
			} else {
				addRiskIdentificationApi(ruleForm).then((res) => {
					console.log(res);
					cancelUseClick();
					updateFun();
				});
			}
		} else {
			console.log('error submit!', fields);
		}
	});
};

/*** ruleFormRef  表单校验 */

const ruleFormRef = ref();
const rules = reactive({
	l_AnalysisUnitId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_HazardousFactors: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_Event: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_RiskLevel: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_ControlMeasure: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_IdentificationPersonnel: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	d_ReEvaluationDate: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
});

const showDialogChangeVisible = ref(false);
const sourceId = ref('');
const addClick = (row: any) => {
	sourceId.value = row.id;

	ruleForm.l_AnalysisUnitId = row.l_AnalysisUnitId; //作业活动场所
	ruleForm.v_HazardousFactors = row.v_HazardousFactors; //危害因素
	ruleForm.v_Event = row.v_Event; //危害因素
	ruleForm.v_RiskAssessmentL = row.v_RiskAssessmentL; //危害因素
	ruleForm.v_RiskAssessmentE = row.v_RiskAssessmentE; //风险评价L
	ruleForm.v_RiskAssessmentC = row.v_RiskAssessmentC; //风险评价E
	ruleForm.v_RiskAssessmentD = row.v_RiskAssessmentD; //风险评价D
	ruleForm.n_RiskLevel = row.n_RiskLevel; //风险等级
	ruleForm.v_ControlMeasure = row.v_ControlMeasure; //危害因素
	ruleForm.v_IdentificationPersonnel = row.v_IdentificationPersonnel; //辨识人员
	ruleForm.d_ReEvaluationDate = row.d_ReEvaluationDate; //重新复评时间

	showDialogChangeVisible.value = true;
};
const controlUseChange = async (formEl: FormInstance | undefined, updateFun: Function) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			addRiskIdentifyListApi({ ...ruleForm, l_SourceId: sourceId.value, isApply: false }).then((res) => {
				console.log(res);
				cancelUseClick();
				updateFun();
			});
		} else {
			console.log('error submit!', fields);
		}
	});
};

/*** 初始化数据 */
const basicsInfo: any = ref([]);
const initInfoFun = () => {
	basicsInfo.value = [
		{
			typeId: 'v_HazardousFactors', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_HazardousFactors', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '危险因素', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_RiskLevelName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'N_RiskLevel', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '风险等级', // placeholder数据
			defaultProp: optionsRisk, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
	];
};

const searInfo: any = ref();
const searchHandel = (val: any) => {
	searInfo.value = val;
};

// 获取岗位
const options1: any = ref([]);

onMounted(async () => {
	const res = await getWorkPlaceApi();
	console.log(res);
	res.data.forEach((element: any) => {
		options1.value.push({
			label: element.v_Name,
			value: element.id,
		});
	});

	await initInfoFun();
});

/*** downClick 下载模板 */
const pathData = ref(import.meta.env.VITE_API_URL + '/'); // 获取地址
const downClick = () => {
	// window.location.href = 'www.baidu.com' // 覆盖当前页
	//    http://8.129.209.198:39056/api/Upload/sms/ExcelTempFiles/风险辨识清单-导入模板.xlsx
	window.open(pathData.value + 'Upload/SMS/ExcelTempFiles/风险辨识清单-导入模板.xlsx', '_blank'); // 打开新页面
};

/*** 截取日期格式方法 */
const formatDate = (row: any, column: any) => {
	// 获取单元格数据
	let data = row[column.property];
	if (data == null) {
		return '-';
	}
	if (data === '1900-01-01 00:00:00') {
		return '-';
	}
	let dt = new Date(data);
	let month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
	let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
	return dt.getFullYear() + '-' + month + '-' + date;
};

/*** ================================= 导出数据函数操作 ================================= */
const excelRef: any = ref(null);
const handleExport = () => {
	if (excelRef.value) {
		if (excelRef.value.data.length !== 0) {
			let tableExcel: any = [];
			let tableArr = excelRef.value.data;
			tableArr.map((item: any) => {
				let tableObj: any = {};
				tableObj['作业活动/场所'] = item.v_AnalysisUnitName ? item.v_AnalysisUnitName : '-';
				tableObj['危险因素'] = item.v_HazardousFactors ? item.v_HazardousFactors : '-';
				tableObj['可能导致的事故类型'] = item.v_Event ? item.v_Event : '-';
				tableObj['风险评价L'] = item.v_RiskAssessmentL ? item.v_RiskAssessmentL : '-';
				tableObj['风险评价E'] = item.v_RiskAssessmentE ? item.v_RiskAssessmentE : '-';
				tableObj['风险评价C'] = item.v_RiskAssessmentC ? item.v_RiskAssessmentC : '-';
				tableObj['风险评价D'] = item.v_RiskAssessmentD ? item.v_RiskAssessmentD : '-';

				tableObj['风险等级'] = item.v_RiskLevelName ? item.v_RiskLevelName : '-';
				tableObj['风险控制措施'] = item.v_ControlMeasure ? item.v_ControlMeasure : '-';
				tableObj['辨识人员'] = item.v_IdentificationPersonnel ? item.v_IdentificationPersonnel : '-';
				tableObj['超期未复评'] = item.isOverdue ? '是' : '否';
				tableObj['重新复评时间'] = item.d_ReEvaluationDate ? item.d_ReEvaluationDate : '-';

				tableObj['创建人'] = item.createdUserName ? item.createdUserName : '-';
				tableObj['创建时间'] = item.createdTime ? item.createdTime : '-';
				tableObj['更新人'] = item.updatedUserName ? item.updatedUserName : '-';
				tableObj['更新时间'] = item.updatedTime ? item.updatedTime : '-';
				tableExcel.push(tableObj);
			});
			exportToExcel(tableExcel, '风险辨识清单.xlsx');
		} else {
			ElMessage({
				type: 'error',
				message: '暂无数据导出',
			});
		}
	}
};


// 创建工作流审批
const drawer = ref(false);
const createApprovalClick = () => {
	drawer.value = true;
};
const handleClose = () => {
	drawer.value = false;
};


const { handleCurrentChange, pageSize, pageNo, handleSizeChange, totalRows, list, indexMethod, loading, getData } = getTableData(getRiskIdentificationListApi, {}, searchObj);
</script>

<template>
	<div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div class="search-s page-public-s" style="box-sizing: border-box">
				<el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" :model="queryRiskForm" ref="queryForm" :inline="true">
						<el-form-item>
							<el-button v-if="$hasPer('riskIdentificationList1:add')" @click="addNodeClick" icon="ele-Plus" type="primary"> 新增 </el-button>
							<el-button v-if="$hasPer('riskIdentificationList2:add2')" @click="createApprovalClick" icon="ele-Plus" type="primary"> 创建风险辨识清单审批流程 </el-button>
							<el-button v-if="$hasPer('riskIdentification6:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
							<el-button v-if="$hasPer('riskIdentification:download')" icon="ele-Download" @click="downClick">下载模板</el-button>
							<el-upload
								v-if="$hasPer('riskIdentification1:export')"
								class="upload-demo"
								action="#"
								:auto-upload="false"
								:show-file-list="false"
								ref="uploadRef"
								:on-change="(file: any) => { uploadFile1(file) }"
								:limit="1"
							>
								<el-button icon="ele-Upload">导入Excel</el-button>
							</el-upload>
						</el-form-item>
					</el-form>
				</el-card>
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="v_AnalysisUnitName" label="作业活动/场所" align="center" />

										<el-table-column min-width="140" :show-overflow-tooltip="true" label="危险因素" align="center">
											<el-table-column min-width="140" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_HazardousFactors" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_HazardousFactors }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="v_Event" label="可能导致的事故类型" align="center" />

										<el-table-column min-width="120" :show-overflow-tooltip="true" label="风险评价" align="center">
											<el-table-column min-width="120" :show-overflow-tooltip="true" label="风险评价L" align="center">
												<template #default="scope">
													<span v-if="scope.row.v_RiskAssessmentL">{{ scope.row.v_RiskAssessmentL }}</span>
													<span v-else> - </span>
												</template>
											</el-table-column>
											<el-table-column min-width="120" :show-overflow-tooltip="true" label="风险评价E" align="center">
												<template #default="scope">
													<span v-if="scope.row.v_RiskAssessmentE">{{ scope.row.v_RiskAssessmentE }}</span>
													<span v-else> - </span>
												</template>
											</el-table-column>
											<el-table-column min-width="120" :show-overflow-tooltip="true" label="风险评价C" align="center">
												<template #default="scope">
													<span v-if="scope.row.v_RiskAssessmentC">{{ scope.row.v_RiskAssessmentC }}</span>
													<span v-else> - </span>
												</template>
											</el-table-column>
											<el-table-column min-width="120" :show-overflow-tooltip="true" label="风险评价D" align="center">
												<template #default="scope">
													<span v-if="scope.row.v_RiskAssessmentD">{{ scope.row.v_RiskAssessmentD }}</span>
													<span v-else> - </span>
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="140" :show-overflow-tooltip="true" label="风险等级" align="center">
											<el-table-column min-width="140" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_RiskLevelName" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_RiskLevelName }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="v_ControlMeasure" label="风险控制措施" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="v_IdentificationPersonnel" label="辨识人员" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="isOverdue" label="超期未复评" align="center">
											<template #default="scope">
												{{ scope.row.isOverdue ? '是' : '否' }}
											</template>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" :formatter="formatDate" prop="d_ReEvaluationDate" label="重新复评时间" align="center" />

										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdUserName" label="创建人" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="createdTime" label="创建时间" align="center" />
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="更新人" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedUserName">{{ scope.row.updatedUserName }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" label="更新时间" align="center">
											<template #default="scope">
												<span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
												<span v-else> - </span>
											</template>
										</el-table-column>
										<el-table-column min-width="180" label="操作" align="center" fixed="right">
											<el-table-column min-width="180" fixed="right" align="center">
												<template #header>
													<el-button @click="searchClick" icon="ele-Search" type="primary" text> 查询 </el-button>
													<el-button @click="resetClick" icon="ele-Refresh" class="clear-bg" text> 重置 </el-button>
												</template>
												<template #default="scope">
													<div class="operate-s">
														<el-button v-if="$hasPer('riskIdentification2:create')" @click="addClick(scope.row)" class="icon-e" icon="ele-Plus" size="small" text type="primary">
															创建变更记录
														</el-button>
														<el-button v-if="$hasPer('riskIdentification3:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 编辑 </el-button>
														<el-button v-if="$hasPer('riskIdentification4:delete')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">
															删除
														</el-button>
													</div>
												</template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 新增and编辑 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDialogVisible" :title="saveId ? '编辑' : '新增'" width="50%" @close="cancelUseClick">
			<el-form label-width="120px" ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="l_AnalysisUnitId" label="作业活动场所">
							<el-select v-model="ruleForm.l_AnalysisUnitId" class="m-2" placeholder="请选择作业活动场所" style="width: 100%">
								<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_HazardousFactors" label="危害因素">
							<el-input type="textarea" v-model="ruleForm.v_HazardousFactors" placeholder="岗位风险因素" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_Event" label="可能导致事故">
							<el-input type="textarea" v-model="ruleForm.v_Event" placeholder="可能导致事故" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价L">
							<el-input v-model="ruleForm.v_RiskAssessmentL" placeholder="风险评价L" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价E">
							<el-input v-model="ruleForm.v_RiskAssessmentE" placeholder="风险评价E" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价C">
							<el-input v-model="ruleForm.v_RiskAssessmentC" placeholder="风险评价C" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价D">
							<el-input v-model="ruleForm.v_RiskAssessmentD" placeholder="风险评价D" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_RiskLevel" label="危害因素">
							<el-select v-model="ruleForm.n_RiskLevel" class="m-2" placeholder="请选择作业活动场所" style="width: 100%">
								<el-option v-for="item in optionsRisk" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ControlMeasure" label="风险控制措施">
							<el-input type="textarea" v-model="ruleForm.v_ControlMeasure" placeholder="风险控制措施" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_IdentificationPersonnel" label="辨识人员">
							<el-input v-model="ruleForm.v_IdentificationPersonnel" placeholder="辨识人员" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="重新复评时间">
							<el-date-picker style="width: 100%" v-model="ruleForm.d_ReEvaluationDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="重新复评时间" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlUseClick(ruleFormRef, getData)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 创建变更记录 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDialogChangeVisible" title="创建变更记录" width="50%" @close="cancelUseClick">
			<el-form label-width="120px" ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="l_AnalysisUnitId" label="作业活动场所">
							<el-select v-model="ruleForm.l_AnalysisUnitId" class="m-2" placeholder="请选择作业活动场所" style="width: 100%">
								<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_HazardousFactors" label="危害因素">
							<el-input v-model="ruleForm.v_HazardousFactors" placeholder="岗位风险因素" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_Event" label="可能导致事故">
							<el-input v-model="ruleForm.v_Event" placeholder="可能导致事故" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价L">
							<el-input v-model="ruleForm.v_RiskAssessmentL" placeholder="风险评价L" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价E">
							<el-input v-model="ruleForm.v_RiskAssessmentE" placeholder="风险评价E" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价C">
							<el-input v-model="ruleForm.v_RiskAssessmentC" placeholder="风险评价C" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险评价D">
							<el-input v-model="ruleForm.v_RiskAssessmentD" placeholder="风险评价D" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_RiskLevel" label="危害因素">
							<el-select v-model="ruleForm.n_RiskLevel" class="m-2" placeholder="请选择作业活动场所" style="width: 100%">
								<el-option v-for="item in optionsRisk" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ControlMeasure" label="风险控制措施">
							<el-input v-model="ruleForm.v_ControlMeasure" placeholder="风险控制措施" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_IdentificationPersonnel" label="辨识人员">
							<el-input v-model="ruleForm.v_IdentificationPersonnel" placeholder="辨识人员" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="重新复评时间">
							<el-date-picker style="width: 100%" v-model="ruleForm.d_ReEvaluationDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="重新复评时间" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlUseChange(ruleFormRef, getData)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 发起工作流审批 -->
		<el-drawer close-on-click-modal="false" close-on-press-escape="false" title="创建风险辨识清单审批"  v-model="drawer" direction="btt" size="70%" @close="handleClose">
			<changeRiskIdentification  v-if="drawer" class="w-h-100"></changeRiskIdentification>
		</el-drawer>
	</div>
</template>

<style lang="scss">
@import '../style/public.scss';
</style>

<style scoped lang="scss">
#friend-merchant-manage {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}

	:deep(.el-card__body) {
		height: 100%;
	}

	:deep(.el-card) {
		border: none !important;
	}

	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
